<template>
  <div class="serchBar">
    <a-form class="ant-advanced-search-form" layout="inline" >
      <a-row type="flex" >
        <a-col :span="4" v-for="(item,index) in serchBarList" :key="index">
          <div class="form_item">
            <a-input class="form_item_input" :model="item.label" :placeholder="item.title" />
          </div>
        </a-col>
        <a-col :span="6" >
          <div class="buttons">
            <a-button type="primary" style="margin-left: 10px">
              搜索
            </a-button>
            <a-button type="primary" style="margin-left: 10px">
              重置
            </a-button>
            <a-button style="margin-left: 10px" @click="changeIsMore">{{ isMore ? '收起' : '更多' }}<a-icon :type="isMore ? 'left' : 'right' " /></a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
const isMoreList = [
  {
    label: 'phone',
    title: '手机号码'
  },
  {
    label: 'name',
    title: '姓名'
  },
  {
    label: 'time',
    title: '时间'
  },
  {
    label: 'type',
    title: '套餐类型'
  },
  {
    label: 'p_name',
    title: '上级'
  }
]
const isOnlyList = [
  {
    label: 'phone',
    title: '手机号码'
  },
  {
    label: 'name',
    title: '姓名'
  }
]
export default {
  data () {
    return {
      serchBarList: isOnlyList,
      phone: '',
      name: '',
      time: '',
      type: '',
      p_name: '',
      isMore: false
    }
  },
  computed: {
  },
  methods: {
    changeIsMore () {
      const isMore = !this.isMore
      if (isMore) {
        this.serchBarList = isMoreList
      } else {
        this.serchBarList = isOnlyList
      }
      this.isMore = isMore
    }

  }
}
</script>

<style lang='less' scoped>
.serchBar{
  width: 100%;
  //margin: 20px 0;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #fff;
  padding: 10px ;
  .ant-advanced-search-form{
    width: 100%;
    .form_item{
      border-radius: 2px;
      width: 80%;
      height: 30px;
      .form_item_input{
        border-radius: 3px;
        margin: 0 10px;
      }
    }
  }

}

.ant-col{
  //height: 35px;
  margin:  5px -30px 5px 0 ;
}
</style>
